<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>导航条</title>
  <link rel="stylesheet" href="css/swiper-bundle.min.css">
  <!-- 滑动栏 -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    * {
      margin: 0px;
      padding: 0px;
    }

    a {
      text-decoration: none;
      color: black;
      font-size: 12px;
    }

    .nav {
      width: 100%;
      height: 160px;
      text-align: center;
      list-style: none;
    }

    .nav li {
      width: 20%;
      height: 60px;
      float: left;
    }

    .nav li img {
      width: 60px;
      height: 50px;
    }

    .nav li a span {
      display: block;
    }
  </style>
  <!-- 顶部窗格 -->
  <style>
    .open {
      width: 100%;
      height: 45px;
      background-color: #333333;
      color: #fff;
      display: flex;
    }

    .open li {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .open li:nth-child(1) {
      width: 8%
    }

    .open li:nth-child(1) img {
      width: 10px;
    }

    .open li:nth-child(2) {
      width: 10%
    }

    .open li:nth-child(2) img {
      width: 30px
    }

    .open li:nth-child(3) {
      width: 57%
    }

    .open li:nth-child(4) {
      width: 25%;
      height: 44px;
      background-color: #f63515;

    }
  </style>
  <!-- 搜索框 -->
  <style>
    .btn,
    .denglu {
      width: 44px;
      height: 44px;
    }

    .sousuo {
      height: 30px;
      background-color: #fff;
      flex: 1;
      border-radius: 15px;
      display: flex;
    }

    .denglu {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn span {
      margin: 14px 0 0 15px;
      width: 20px;
      height: 18px;
      display: block;
      background-size: 100% 100%;
      background: url(…AlncUAAAAbSURBVBjTY5j/Hwq+MdTDmH+RmUgK6AuGhcsAU5tyB6Ji+x0AAAAASUVORK5CYII=) no-repeat;
    }b

    .jd {
      width: 20px;
      height: 15px;
      background: url(…u4kmY8ju8Ifb2f/i3WV+/gzq0Zgs0xba0eHCSsj4zLR91f1fAfiWsqzlEAAAAASUVORK5CYII=) no-repeat;
      background-size: 20px 15px;
      margin: 8px 8px 0 15px;

    }

    .fangdajing {
      width: 18px;
      background: url(https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=) no-repeat;
      height: 15px;

      background-position: -80px 0;
      background-size: 200px;
      margin: 8px 0 0 15px;
    }
  </style>
</head>

<body>
  <!-- 顶部窗格 -->
  <div class="open">
    <li><img src="./images/close.png" alt=""></li>
    <li><img src="./images/jingdong.png" alt=""></li>
    <li>打开京东app，购物更轻松</li>
    <li>立即打开</li>
  </div>
  <!-- 搜索栏 -->
  <div class="sousuo-wrapper">
    <div class="btn">
      <span></span>
    </div>
    <div class="sousuo">
      <div class="jd"></div>
      <div class="fangdajing"></div>
    </div>
    <div class="denglu"><span> 登录</span></div>
  </div>
  <!-- 滑动栏 -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ul class="nav">
          <li><a href="#"><img src="images/1.png" alt=""><span>天猫新品</span></a></li>
          <li><a href="#"><img src="images/2.png" alt=""><span>今日爆款</span></a></li>
          <li><a href="#"><img src="images/3.png" alt=""><span>天猫国际</span></a></li>
          <li><a href="#"><img src="images/4.png" alt=""><span>饿了吗</span></a></li>
          <li><a href="#"><img src="images/5.png" alt=""><span>天猫超市</span></a></li>
          <li><a href="#"><img src="images/6.png" alt=""><span>充值中心</span></a></li>
          <li><a href="#"><img src="images/7.png" alt=""><span>机票酒店</span></a></li>
          <li><a href="#"><img src="images/8.png" alt=""><span>金币庄园</span></a></li>
          <li><a href="#"><img src="images/9.png" alt=""><span>阿里拍卖</span></a></li>
          <li><a href="#"><img src="images/10.png" alt=""><span>淘宝吃货</span></a></li>
        </ul>
      </div>
      <div class="swiper-slide">
        <ul class="nav">
          <li><a href="#"><img src="images/11.png" alt=""><span>分类</span></a></li>
          <li><a href="#"><img src="images/12.png" alt=""><span>天猫美食</span></a></li>
          <li><a href="#"><img src="images/13.png" alt=""><span>阿里健康</span></a></li>
          <li><a href="#"><img src="images/14.png" alt=""><span>口碑生活</span></a></li>
          <li><a href="#"><img src="images/15.png" alt=""><span>闲鱼</span></a></li>
          <li><a href="#"><img src="images/16.png" alt=""><span>会员中心</span></a></li>
          <li><a href="#"><img src="images/17.png" alt=""><span>造点新货</span></a></li>
          <li><a href="#"><img src="images/18.png" alt=""><span>土货鲜食</span></a></li>
        </ul>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>
  <script src="js/swiper-bundle.min.js"></script>



  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    });
  </script>
</body>

</html>